<template>
	<view class="uni-flex uni-flex-item uni-column">
		<view class="uni-list" id="tuijian-product">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in shop_products" :key="key">
				<view class="uni-media-list" v-if="value.stock>0">
					<image class="uni-media-list-logo" :src="value.img" @tap="showDetail(value)"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top uni-ellipsis-2" @tap="showDetail(value)">{{value.title}}</view>
						<view class="uni-media-list-text-bottom">
							<view>
								<text class="uni-h6">{{value.seller_count}}</text>
								<text>&nbsp;&nbsp;</text>
								<text class="uni-h6">库存剩{{value.stock}}件</text>
							</view>
							<view>
								<text class="product-price">￥{{value.price/100}}</text>
								<text>&nbsp;&nbsp;</text>
								<text class="product-origin-price">￥{{value.origin_price/100}}</text>
							</view>
							<view class="uni-flex uni-flex-item uni-flex-row" style="justify-content: flex-end;">
								<!-- #ifdef APP-PLUS -->
								<view>
									<button class="mini-btn" size="mini" @tap="share(value)">分享</button>
									<button class="mini-btn" size="mini" @tap="addCart(value)">购买</button>
								</view>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view>
									<button class="mini-btn" size="mini" open-type="share" :data-value="value">分享</button>
									<button class="mini-btn" size="mini" @tap="addCart(value)">购买</button>
								</view>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadMore" v-if="showLoadMore" @tap="getShopProducts()">{{loadMoreText}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'


	export default {
		data() {
			return {
				shop_id: 682731,
				shop_products: [],
				temai_products: [],
				page: 0,
				loadMoreText: "加载更多...",
				showLoadMore: true,
				has_more: true,
			}
		},
		computed: {},
		onLoad: function (options) {
			this.getShopProducts()
		},
		onUnload: function () {
			this.loadMoreText = "加载更多...";
			this.showLoadMore = false;
			this.has_more = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.has_more === false) {
				this.loadMoreText = "没有更多数据了!"

				console.log(this.loadMoreText);
				return;
			}
			this.showLoadMore = true;
			//加载下一页数据
			this.getShopProducts();
		},
		// #ifdef MP-WEIXIN
		//分享按钮函数
		onShareAppMessage: function (options) {
			if (options.from === 'button') {
				// 来自页面内转发按钮
				// console.log('target:' + JSON.stringify(options.target))
				let value = options.target.dataset.value;
				console.log('value:' + JSON.stringify(value))
				console.log('img:' + JSON.stringify(value.img))

				let iid = value.iid;
				let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=${this.shop_id}`;
				return {
					title: value.title,
					// desc: value.desc,
					path: api,
					imageUrl: value.img,
					success: function (res) {
						// 转发成功
						console.log("转发成功:" + JSON.stringify(res));
					},
					fail: function (res) {
						// 转发失败
						console.log("转发失败:" + JSON.stringify(res));
					}
				}
			} else {

				return {
					title: 'XXX小程序',
					desc: '最具人气的小程序开发联盟!',
					path: 'pages/index/index',
					// imageUrl: "/images/1.jpg",
					success: function (res) {
						// 转发成功
						console.log("转发成功:" + JSON.stringify(res));
					},
					fail: function (res) {
						// 转发失败
						console.log("转发失败:" + JSON.stringify(res));
					}
				}
			}
		},
		// #endif

		methods: {
			getShopProducts() {
				if (this.has_more) {
					this.page = this.page + 1;
				} else {
					return;
				}
				let url =
					`https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${this.page}&shop_id=${this.shop_id}`;
				//https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=1&shop_id=682731
				uni.request({
					url: url,
					success: (res) => {
						this.has_more = res.data.has_more;
						this.shop_products = this.shop_products.concat(res.data.shop_products)
						this.temai_products = this.temai_products.concat(res.data.temai_products)
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			addCart: function (item) {
				uni.showToast({
					title: '添加到购物车',
				})
				console.log('AddCart:' + JSON.stringify(item));
				this.$store.commit('addCart', item);
			},
			showDetail(value) {
				//https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731
				let iid = value.iid;
				let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=${this.shop_id}`;

				// 贝店程序限制，WebView模式下无法打开详情页，调用外部浏览器打开
				// #ifdef APP-PLUS
				plus.runtime.openURL(api)
				// #endif

				// 微信小程序中暂时没有解决方案
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: api,
					success: function () {
						uni.showModal({
							title: '提示',
							content: '链接已复制，请在浏览器中访问',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
				// #endif
			},
			// #ifdef APP-PLUS
			share(value) {
				let iid = value.iid;
				let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=${this.shop_id}`;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: api,
					title: value.title,
					summary: value.desc,
					imageUrl: value.img,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
						uni.showModal({
							title: '提示',
							content: '请安装微信客户端，再分享',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			// #endif
		},
	}
</script>

<style>
	#tuijian-product .uni-media-list-logo {
		height: 200px;
		width: 200px;
		margin-right: 20px;
	}

	#tuijian-product .uni-media-list-body {
		height: 200px;
	}

	#tuijian-product .uni-media-list-text-top {
		font-size: 26px;
	}

	#tuijian-product .uni-media-list-text-bottom {
		flex-direction: column;
	}

	.product-price {
		font-size: 25px;
		color: red;
	}

	.product-origin-price {
		font-size: 20px;
		text-decoration: line-through;
		color: #929292;
	}

	.loadMore {
		text-align: center;
		line-height: 100px;
		font-size: 30px;
		justify-content: center;
		align-items: flex-start;
	}

	button {
		margin-left: 20px;
	}
</style>
